/*
  学习目标：JSX的三个注意事项
*/

import React from 'react';
import ReactDOM from 'react-dom';

const ulNode2 = (
  // 1. jsx必须有根标签
  //  多个元素时，推荐使用👍<> </>  或 <React.Fragment></React.Fragment>
  <>
    <ul className="list">
      <li>香蕉1</li>
      <li>香蕉2</li>
      <li>香蕉3</li>
    </ul>
    <ul>
      <li>123</li>
    </ul>

    {/*   2. JSX必须闭合标记 */}
    <input id="box" type="text" />
    {/* 3. 关键字冲突:
     3.1 class =》 className
     3.2 for => htmlFor*/}

    <label htmlFor="box">for的作用放大点击区域, 点我更同于点了input</label>
  </>
);

ReactDOM.render(ulNode2, document.getElementById('root'));
